<template>
  <view class="page">
    <view class="header">
      <view class="left">
        <image class="logo" :src="getShowNginxPicUrl('ohiDotpBRca3m7idk1gz.png')"></image>
      </view>

      <view class="right">
        <view class="btn-item" @click="() => $uni.redirectTo({ url: '/studyRoom/pages/rank/index' })">
          <view class="icon-container">
            <image class="icon" :src="rankIcon"></image>
          </view>
          <view class="text">排行榜</view>
        </view>
        <view class="btn-item" @click="() => $uni.reLaunch({ url: '/pages/mine/mine' })">
          <view class="icon-container">
            <image class="icon" :src="mineIcon"></image>
          </view>
          <view class="text">我的</view>
        </view>
      </view>
    </view>

    <!--		当前自习室自习人数-->
    <view class="current-study-banner">
      <image class="background" :src="getShowNginxPicUrl('zqgHv4ZnQ4qxfRLyKMYY.png')"></image>
      <view class="text"></view>

      <view class="text">
        <text class="number">{{ studyRoomStudentCount }}</text>
        <text>人的自习室里，没有虚度的光阴</text>
      </view>
    </view>

    <!--		切换 所有 / 我的 / 仅可用-->
    <view class="toggle-bar">
      <view
        class="item"
        v-for="item in toggleBarList"
        :key="item.label"
        :class="{ active: item.label === currentToggleBarItem }"
        @click="
          () => {
            currentToggleBarItem = item.label
            resetPagination()
          }
        "
        >{{ item.label }}</view
      >
    </view>

    <!--		自习室列表-->
    <view class="study-room-list" v-if="studyRoomList.length > 0">
      <view class="item" v-for="item in studyRoomList" :key="item.studyRoomId">
        <!--				自习室锁住遮罩层-->
        <view class="lock-mask" v-if="item.studyRoomStatus === 'Unavailable'" @click.stop="() => getStudyRoomDetail(item)">
          <image class="lock-icon" :src="getShowNginxPicUrl('nrwMieebruEouxfJ5oYs.png')"></image>
        </view>
        <!--				自习室可用，图标-->
        <image
          class="available-icon"
          :src="getShowNginxPicUrl('YD9KHffL4QVDpLPsCsZk.png')"
          v-if="item.studyRoomStatus !== 'Unavailable'"
        ></image>
        <!--				默认图标-->
        <image class="icon" src="https://kou.gdzmtech.com/pic/Ja4mncQb5KrZXtvT9tjA.png" v-if="!item.studyRoomPic"></image>
        <!--				自定义图标-->
        <image class="icon" :src="getShowImage(item.studyRoomPic)" v-else></image>

        <view class="right">
          <view class="top">
            <view class="study-room-name">{{ item.studyRoomName }}</view>
            <view class="join-count">
              <text style="color: #a75b07">{{ item.currentOccupancy + item.virtualJoinCount }}</text>
              <text> 人自习中</text>
            </view>
          </view>
          <view class="bottom">
            <!--					自习室状态-->
            <view class="btn" v-if="item.studyStatus === 'Studying'" @click="() => getStudyRoomDetail(item)">继续学习</view>
            <!--					自习室可用-->
            <view class="btn" v-else-if="item.studyRoomStatus === 'Available'" @click="() => getStudyRoomDetail(item)">进入</view>

            <view class="btn disabled" v-else-if="item.studyRoomStatus === 'Unavailable'" @click="() => getStudyRoomDetail(item)"
              >不可用</view
            >
          </view>
        </view>
      </view>
      <uniLoadMore :status="loadMoreStatusText"></uniLoadMore>
    </view>
    <empty v-else height="calc(100vh - 372rpx)"></empty>

    <enterToStudyRoom ref="enterToStudyRoom"></enterToStudyRoom>
  </view>
</template>

<script>
import mineIcon from "./assets/mine.png"
import rankIcon from "./assets/rank.png"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import request from "@/utils/request"
import dict, { dictActionType } from "@/store/modules/dict"
import store from "@/store"
import { getShowImage, handleUrlParams } from "@/utils"
import empty from "@/components/empty.vue"
import enterToStudyRoom from "@/studyRoom/components/enterToStudyRoom/index.vue"
import { getShowNginxPicUrl } from "@/utils/settings"

export default {
  components: {
    uniLoadMore,
    empty,
    enterToStudyRoom,
  },
  data() {
    return {
      mineIcon,
      rankIcon,
      currentToggleBarItem: "所有",
      toggleBarList: [
        {
          label: "所有",
        },
        {
          label: "我的",
        },
        {
          label: "仅可用",
        },
      ],
      studyRoomList: [],
      pagination: {
        current: 1,
        size: 10,
      },
      loadMoreStatusText: "more",
      // 当前所有自习室的自习人数
      studyRoomStudentCount: (() => {
        // 取 2300 到 2500 之间的随机数
        return Math.floor(Math.random() * 200 + 2300)
      })(),
    }
  },
  async onLoad() {
    const dictList = await store.dispatch(dictActionType.actions.dict)
    console.log(dictList, "dictList")
  },
  onShow() {
    this.resetPagination()
  },
  methods: {
    getShowNginxPicUrl,
    getShowImage,
    // 获取自习室列表
    getStudyRoomList() {
      return new Promise((resolve, reject) => {
        if (this.loadMoreStatusText === "loading") {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        let studyRoomStatus //自习室状态（可用，不可用）
        let url //请求地址
        switch (this.currentToggleBarItem) {
          case "所有":
            studyRoomStatus = ""
            url = "studyRoom/listStudyRoom"
            break
          case "我的":
            studyRoomStatus = ""
            url = "studyRoom/myJoiningRoom"
            break
          case "仅可用":
            studyRoomStatus = "Available"
            url = "studyRoom/listStudyRoom"
            break
        }
        request({
          url,
          data: {
            ...this.pagination,
            studyRoomStatus,
          },
          errorHandle: true,
        }).then((data) => {
          this.studyRoomList.push(...data.records)
          //判断是否还有数据
          if (data.total <= this.studyRoomList.length) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },
    //重置分页并重新加载数据
    resetPagination() {
      return new Promise((resolve, reject) => {
        this.pagination.current = 1
        this.studyRoomList = []
        uni.showLoading({
          title: "加载中",
          mask: true,
        })
        this.getStudyRoomList().finally(() => {
          uni.hideLoading()
          resolve()
        })
      })
    },
    // 获取自习室详情
    getStudyRoomDetail(item) {
      this.$refs.enterToStudyRoom.enterToStudyRoom(item.studyRoomId)
    },
  },
  onReachBottom() {
    if (this.loadMoreStatusText === "noMore") {
      return
    }
    this.pagination.current++
    this.getStudyRoomList()
  },
  onPullDownRefresh() {
    this.resetPagination().finally(() => {
      uni.stopPullDownRefresh()
    })
  },
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #fffaf5 0%, #fff7f2 100%);
  padding: {
    left: 30rpx;
    right: 30rpx;
    bottom: env(safe-area-inset-bottom);
  }
  > .header {
    display: flex;
    align-items: center;
    padding-top: 30rpx;
    > .left {
      width: 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      > .logo {
        width: 276rpx;
        height: 86rpx;
      }
    }
    > .right {
      display: flex;
      > .btn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 30rpx;
        > .icon-container {
          width: 90rpx;
          height: 90rpx;
          > .icon {
            width: 100%;
            height: 100%;
          }
        }
        > .text {
          margin-top: 8rpx;
          color: #a77d57;
          font-size: 30rpx;
        }
      }
    }
  }
  .current-study-banner {
    margin-top: 16rpx;
    height: 138rpx;
    position: relative;
    > .background {
      width: 100%;
      height: 100%;
    }
    > .text {
      position: absolute;
      font-size: 28rpx;
      bottom: 22rpx;
      right: 22rpx;
      > .number {
        color: #ff9200;
      }
    }
  }
  .toggle-bar {
    display: flex;
    .item {
      margin-top: 30rpx;
      margin-right: 20rpx;
      padding: 10rpx 20rpx;
      border-radius: 32rpx;
      border: 2rpx solid var(--dark-border-color);
      font-size: 30rpx;
      &.active {
        background: var(--theme-color);
        color: white;
        border: 2rpx solid transparent;
      }
    }
  }
  .study-room-list {
    > .item {
      margin-top: 40rpx;
      background: #fff4cc;
      border-radius: 20rpx;
      display: flex;
      padding: 20rpx;
      align-items: center;
      position: relative;
      > .lock-mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20rpx;
        > .lock-icon {
          width: 104rpx;
          height: 104rpx;
        }
      }
      > .available-icon {
        width: 82rpx;
        height: 82rpx;
        position: absolute;
        top: -30rpx;
        right: -16rpx;
      }
      > .icon {
        width: 194.4rpx;
        height: 183.6rpx;
      }
      > .right {
        margin-left: 60rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 163rpx;
        > .top {
          > .study-room-name {
            font-size: 32rpx;
          }
          > .join-count {
            color: var(--text-color-light);
            font-size: 28rpx;
            margin-top: 14rpx;
          }
        }
        > .bottom {
          > .status {
            font-size: 30rpx;
            color: var(--theme-color);
          }
          > .btn {
            background: var(--theme-color);
            padding: 10rpx 0;
            width: 200rpx;
            text-align: center;
            border-radius: 30rpx;
            color: white;
            font-size: 28rpx;
            &.disabled {
              background: var(--dark-border-color);
            }
          }
        }
      }
    }
  }
}
</style>
